<template>
	<div class="base-info-content">
		<el-form ref="ruleFormRef" :model="goodsInfoData" :rules="rules" label-width="160px">
			<section class="font16 px10 pl20 borderRadius5 mb20" style="background:var(--el-color-primary-light-9);">
				<p>商品类型与销售渠道</p>
			</section>
			<el-form-item label="商品类型：" prop="spuType">
				<section style="display: flex; flex-direction: column;">
					<section class="flex">
						<div class="width130 flex-column-center typeBox" 
							:class="item.dictValue  == goodsInfoData.spuType ? 'typeBoxSelected':'' "
							v-for="item in props.productTypeList" :key="item.dictValue"
							:disabled="goodsInfoData.status == 'edit'" @click="changeType(item.dictValue)">
							<span class="font16"> {{ item.dictName }} </span>
							<span class="font14 "> {{ item.dictDescription }} </span>
							<div v-if="item.dictValue  == goodsInfoData.spuType" class="virtual_san"></div>
							<div v-if="item.dictValue  == goodsInfoData.spuType" class="virtual_dui">✓</div>
						</div>
					</section>
					<explainBox msg="商品类型在商品保存后无法修改，请谨慎选择" color="var(--el-color-primary-light-2)" />
				</section>
			</el-form-item>
			<el-form-item label="销售渠道：" prop="salesChannel">
				<el-checkbox-group v-model="goodsInfoData.salesChannel" >
					<el-checkbox :label=1 :disabled="goodsInfoData.spuType == 6"> 门店销售 </el-checkbox>
					<el-checkbox :label=2> 线上销售 </el-checkbox>
					<el-checkbox :label=4 :disabled="goodsInfoData.spuType != 1"> 平台内采 </el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			<section class="font16 px10 pl20 borderRadius5 mb20" style="background:var(--el-color-primary-light-9);">
				<p>商品基础信息</p>
			</section>
			<el-form-item label="商品品牌：" prop="brandId" v-if="goodsInfoData.spuType == 1">
				<el-select class="width420" v-model="goodsInfoData.brandId" placeholder="请选择商品品牌">
					<el-option v-for="item of state.brandList" :label="item.brandName" :value="item.brandId" :key="item.brandId" />
				</el-select>&emsp;
			</el-form-item>
			<el-form-item label="商品名称：" prop="spuName">
				<el-input class="width420" v-model="goodsInfoData.spuName" placeholder="请输入商品名称" />
			</el-form-item>
			<el-form-item label="商品标题：" prop="title" v-if="goodsInfoData.salesChannel.includes(2)">
				<el-input class="width420" v-model="goodsInfoData.title" placeholder="请输入商品标题" />
			</el-form-item>
			<el-form-item label="商品副标题：" prop="subTitle" v-if="goodsInfoData.salesChannel.includes(2)"  >
				<el-input class="width420" v-model="goodsInfoData.subTitle" placeholder="请输入商品副标题" />
			</el-form-item>
			<el-form-item label="商品排序：">
				<el-input-number class="width420" v-model="goodsInfoData.sortNumber" :precision="0" :step="1" placeholder="请输入商品排序"
                    :min="-100" :max="10000000" />
			</el-form-item>
			<el-form-item label="标题标签：" v-if="goodsInfoData.salesChannel.includes(2)"  >
				<section>
					<section class="shiseqi flex" style="align-items:center;">
						<el-input class="width180 mr10" maxlength="4" show-word-limit v-model="goodsInfoData.spuTags.name" placeholder="请输入标签" />
						<el-color-picker v-model="goodsInfoData.spuTags.color" />
						<el-input class="width110 ml10" v-model="goodsInfoData.spuTags.color" />
					</section>
					<explainBox msg="显示在商品列表和商品详情标题上的标签" :isPicUrl=true 
					color="var(--el-color-primary-light-2)" picUrl="https://v5.100cms.com.cn/static/dist/shop/img/goods_label.png"/>
				</section>
			</el-form-item>
			<el-form-item label="商品主图：" prop="imgUrl">
				<section>
					<el-image v-if="goodsInfoData.imgUrl != ''" class="mr20"
						style="width:64px; height: 64px;border-radius: 5px;" :src="goodsInfoData.imgUrl" fit="cover" />
					<section v-else class="selector-img" @click="addImg('imgUrl', 0)">
						<el-icon size="30" color="#999">
							<Plus />
						</el-icon>
					</section>
					<explainBox class="mb5" msg="用于商城列表、双列三列商品组、分享头图。建议尺寸：800*800像素" :isPicUrl=true 
						color="var(--el-color-primary-light-2)" picUrl="https://v5.100cms.com.cn/static/dist/shop/img/shop_main.png"/>
					<el-image v-if="goodsInfoData.imgOblongUrl != ''" class="width160"
						style="height: 64px;border-radius: 5px;" :src="goodsInfoData.imgOblongUrl" fit="cover" />
					<section v-else class="selector-img" @click="addImg('imgOblongUrl', 0)" style="width: 160px;">
						<el-icon size="30" color="#999">
							<Plus />
						</el-icon>
					</section>
					<explainBox msg="用于装修单列商品组的商品主图，未设置时读取商品主图。建议尺寸：800*374像素" :isPicUrl=true 
						color="var(--el-color-primary-light-2)" picUrl="https://v5.100cms.com.cn/static/dist/shop/img/single_row.png"/>
				</section>
			</el-form-item>
			<el-form-item label="图片视频比例：" prop="imgScale">
				<section style="display:block;">
					<el-radio-group v-model="goodsInfoData.imgScale">
						<el-radio :label=0>1:1</el-radio>
						<el-radio :label=1>3:4</el-radio>
						<el-radio :label=2>4:3</el-radio>
						<el-radio :label=3>16:9</el-radio>
					</el-radio-group>
					<section>
					<explainBox msg="商品详情页轮播图显示长宽比例" width='450px'
						color="var(--el-color-primary-light-2)" :isPicUrl=true picUrl="https://vipuser3.eweishop.com/static/dist/shop/image/goods/thumb-video-ratio.png"/>
					</section>
				</section>
			</el-form-item>
			<el-form-item label="商品轮播图：">
				<section>
					<section class="flex">
						<el-image v-for="(item, index) in goodsInfoData.imgOnline" :key="index" class="mr20"
							style="width:64px; height: 64px;border-radius: 5px;" :src="item" fit="cover" />
						<section class="selector-img" @click="addImg('imgOnline', 1)">
							<el-icon size="30" color="#999">
								<Plus />
							</el-icon>
						</section>
					</section>
					<explainBox v-if="goodsInfoData.imgScale == 0" msg="建议尺寸: 800:800像素, 轮播图可以拖拽图片调整顺序,最多上传10张" 
						color="var(--el-color-primary-light-2)" :isPicUrl=true picUrl="https://v5.100cms.com.cn/static/dist/shop/img/shop_swiper.png"/>
					<explainBox v-if="goodsInfoData.imgScale == 1" msg="建议尺寸: 600*800像素, 轮播图可以拖拽图片调整顺序,最多上传10张" 
					color="var(--el-color-primary-light-2)" :isPicUrl=true picUrl="https://v5.100cms.com.cn/static/dist/shop/img/shop_swiper.png"/>
					<explainBox v-if="goodsInfoData.imgScale == 2" msg="建议尺寸: 800*600像素, 轮播图可以拖拽图片调整顺序,最多上传10张" 
					color="var(--el-color-primary-light-2)" :isPicUrl=true picUrl="https://v5.100cms.com.cn/static/dist/shop/img/shop_swiper.png"/>
					<explainBox v-if="goodsInfoData.imgScale == 3" msg="建议尺寸: 800*450像素, 轮播图可以拖拽图片调整顺序,最多上传10张" 
					color="var(--el-color-primary-light-2)" :isPicUrl=true picUrl="https://v5.100cms.com.cn/static/dist/shop/img/shop_swiper.png"/>
				</section>
			</el-form-item>
			<el-form-item label="添加视频：">
				<section>
					<el-switch v-model="goodsInfoData.isVideo" />
				</section>
			</el-form-item>
			<el-form-item label="视频链接：" prop="videoUrl" v-if="goodsInfoData.isVideo">
				<section>
					<el-input class="width420" v-model="goodsInfoData.videoUrl" placeholder="请输入视频链接" />
				</section>
			</el-form-item>
			<el-form-item label="视频自动播放：" v-if="goodsInfoData.isVideo">
				<el-radio-group v-model="goodsInfoData.videoAutoplay">
					<el-radio :label="false">否</el-radio>
					<el-radio :label="true">是</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="静音播放：" v-if="goodsInfoData.isVideo">
				<el-radio-group v-model="goodsInfoData.videoMuteplay">
					<el-radio :label="false">否</el-radio>
					<el-radio :label="true">是</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="门店商品分类：" prop="storeTypes" v-if="goodsInfoData.salesChannel.includes(1)">
				<el-cascader class="width420" v-model="goodsInfoData.storeTypes" placeholder="请选择门店商品品牌" :options="state.storeCategoryList"
					:props="{ label: 'text', value: 'id', children: 'children' }" />&emsp;
			</el-form-item>
			<el-form-item label="商城商品分类：" prop="shopTypes" v-if="goodsInfoData.salesChannel.includes(2)">
				<el-cascader class="width420" v-model="goodsInfoData.shopTypes" placeholder="请选择商城商品品牌" :options="state.shopCategoryList"
					:props="{ label: 'text', value: 'id', children: 'children' }" />&emsp;
			</el-form-item>
			<section class="font16 px10 pl20 borderRadius5 mb20" style="background:var(--el-color-primary-light-9);">
				<p>商品销售渠道与运费</p>
			</section>
			<el-form-item label="销售门店：" v-if="goodsInfoData.salesChannel.includes(1)" prop="storeSalesType">
				<section class="flex" style="flex-direction: column;width:100%">
					<section>
						<el-radio-group v-model="goodsInfoData.storeSalesType">
							<el-radio :label=0> 全部门店 </el-radio>
							<el-radio :label=1> 部分门店 </el-radio>
						</el-radio-group>
					</section>
					<section v-if="goodsInfoData.storeSalesType == 1" class="px10 mb10 borderRadius5" style="background:var(--el-color-primary-light-9);">
						<el-tag v-for="tag in goodsInfoData.storeSales" class="mr15" :key="tag.id" closable>
							{{ tag.itemName }}
						</el-tag>
						<el-tag color="var(--el-color-primary)" style="color:var(--el-color-white)" @click="addSaleStore('store')" class="mr15">
							添加销售门店
						</el-tag>
					</section>
				</section>
			</el-form-item>
			<el-form-item label="服务门店：" v-if="goodsInfoData.spuType == 2" prop="storeServiceType">
				<section class="flex" style="flex-direction: column;width:100%">
					<section>
						<el-radio-group v-model="goodsInfoData.storeServiceType">
							<el-radio :label=0>全部门店</el-radio>
							<el-radio :label=1>部分门店</el-radio>
						</el-radio-group>
					</section>
					<section v-if="goodsInfoData.storeServiceType == 1" class="px10 mb10 borderRadius5" style="background:var(--el-color-primary-light-9);">
						<el-tag v-for="tag in goodsInfoData.storeService" class="mr15" :key="tag.id" closable>
							{{ tag.itemName }}
						</el-tag>
						<el-tag color="var(--el-color-primary)" style="color:var(--el-color-white)" @click="addSaleStore('service')" class="mr15">
							添加服务门店
						</el-tag>
						<el-tag color="var(--el-color-primary)" style="color:var(--el-color-white)" @click="copySaleStore" class="mr15">
							同销售门店
						</el-tag>
					</section>
				</section>
			</el-form-item>
			<el-form-item label="线上销售渠道：" v-if="goodsInfoData.salesChannel.includes(2)" prop="salesOnlineChannel">
				<el-checkbox-group v-model="goodsInfoData.salesOnlineChannel">
					<el-checkbox :label=0 :key=0 :disabled="goodsInfoData.salesOnlineChannel.includes(1) || 
						goodsInfoData.salesOnlineChannel.includes(2) || goodsInfoData.salesOnlineChannel.includes(4)">全部(所有渠道)</el-checkbox>
					<el-checkbox :label=1 :key=1 :disabled="goodsInfoData.salesOnlineChannel.includes(0)">微信小程序</el-checkbox>
					<el-checkbox :label=2 :key=2 :disabled="goodsInfoData.salesOnlineChannel.includes(0)">微信公众号</el-checkbox>
					<el-checkbox :label=4 :key=4 :disabled="goodsInfoData.salesOnlineChannel.includes(0)">H5</el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			<el-form-item label="物流方式：" v-if="goodsInfoData.salesChannel.includes(2)"> 
				<el-checkbox-group v-model="goodsInfoData.transport">
					<el-checkbox :label=1>快递 </el-checkbox>
					<el-checkbox :label=2>到店核销 </el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			<el-form-item label="运费设置：" v-if="goodsInfoData.transport.includes(1)">
				<section style="display: flex;flex-direction: column;">
					<section>
						<el-radio-group v-model="goodsInfoData.freightset">
							<el-radio :label=1>固定邮费</el-radio>
							<el-radio :label=2>运费模板</el-radio>
						</el-radio-group>
					</section>
					<section v-if="goodsInfoData.freightset == 1">
						<el-input class="width420" v-model="goodsInfoData.freightNum" placeholder="请输入固定邮费金额" />
					</section>
					<section v-else-if="goodsInfoData.freightset == 2" class="flex">
						<el-select v-model="goodsInfoData.freightId" placeholder="请选择运费模板" class="width420">
							<el-option v-for="item of state.freightTemplateList" :label="item.name" :value="item.id" :key="item.brandId" />
						</el-select>&emsp;
					</section>
				</section>
			</el-form-item>
			<el-form-item label="商品上架：">
				<section class="flex" style="flex-direction: column;">
					<section>
						<el-radio-group v-model="goodsInfoData.grounding">
							<el-radio :label=1>立即上架</el-radio>
							<el-radio :label=2>上架隐藏</el-radio>
							<el-radio :label=0>下架</el-radio>
							<el-radio :label=3>定时上架</el-radio>
						</el-radio-group>
					</section>
					<section v-if="goodsInfoData.grounding == 3">
						<el-date-picker v-model="goodsInfoData.groundingTime" class="width420" type="datetime" placeholder="上架时间" />
					</section>
				</section>
			</el-form-item>
			<el-form-item label="商品下架：">
				<section class="flex" style="flex-direction: column;">
					<section>
						<el-radio-group v-model="goodsInfoData.delisting">
							<el-radio :label=0>关闭</el-radio>
							<el-radio :label=3>定时下架</el-radio>
						</el-radio-group>
					</section>
					<section v-if="goodsInfoData.delisting == 3">
						<el-date-picker v-model="goodsInfoData.delistingTime" class="width420" type="datetime" placeholder="下架时间" />
					</section>
				</section>
			</el-form-item>
		</el-form>
		<section style="text-align: center; margin:10px 0;">
			<el-button type="primary" @click="nextStep(ruleFormRef)">下一步</el-button>
		</section>
		<AddInformation ref="addInformationRef" @selectFun="selectFun" />
		<selectStore ref="selectStoreRef" @selectItem="selectItem"></selectStore>
	</div>
</template>
<script setup lang="ts" name="funWangEditor">
import { reactive, onMounted, ref, defineAsyncComponent } from 'vue';
import { ElMessage } from 'element-plus';
import { Plus } from '@element-plus/icons-vue'

import { freightTemplateList } from "/@/api/common";
import { brandList, productCategoryList } from "/@/api/commodity";
import type { FormInstance, FormRules } from 'element-plus'
const AddInformation = defineAsyncComponent(() => import('/@/components/information/AddInformation.vue'))
const selectStore = defineAsyncComponent(() => import('/@/components/dialog/selectStore.vue'))
const selectStoreRef = ref()
const emit = defineEmits(['stepChange','changeSpuType'])
const ruleFormRef = ref<FormInstance>()
const addInformationRef = ref()
import { goodsInfo } from '/@/stores/goods';
const goodsInfoData = goodsInfo()
const props = defineProps({
	// 商品分类数据
	productTypeList: {
		type: Array,
	}
});
const state = reactive({
	// 添加图片类型
	addFileType: '',
	// 商品类型列表
	brandList: [] as Array<any>,
	// 门店商品分类
	storeCategoryList: [] as Array<any>,
	// 商城商品分类
	shopCategoryList: [] as Array<any>,
	// 运费模板列表
	freightTemplateList: [] as Array<any>,
})

const rules = reactive<FormRules<any>>({
	spuType: [{ required: true, message: '请选择商品类型', trigger: 'change' }],
	salesChannel: [{ required: true, message: '请选择销售渠道', trigger: 'change' }],
	brandId: [{ required: true, message: '请选择商品品牌', trigger: 'change' }],
	spuName: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
	title: [{ required: true, message: '请输入商品标题', trigger: 'blur' }],
	subTitle: [{ required: true, message: '请输入商品副标题', trigger: 'blur' }],
	imgUrl: [{ required: true, message: '请上传商品主图', trigger: 'blur' }],
	imgScale: [{ required: true, message: '请选择图片视频比例', trigger: 'change', }],
	imgOnline: [{ required: true, message: '请上传商品轮播图', trigger: 'blur' }],
	isVideo: [{ required: true, message: '请选择是否添加商品视频', trigger: 'blur' }],
	videoUrl: [{ required: true, message: '请选择视频', trigger: 'blur' }],
	storeTypes: [{ required: true, message: '请选择门店商品分类', trigger: 'change', }],
	shopTypes: [{ required: true, message: '请选择商城商品分类', trigger: 'change', }],
	salesOnlineChannel: [{ type: 'array', required: true, message: '至少选择一项', trigger:'change'}],
	storeSalesType: [{ type: 'array', required: true, message: '至少选择一项', trigger:'change'}],
	storeServiceType: [{ type: 'array', required: true, message: '至少选择一项', trigger:'change'}],
})

// 商品类型修改 不同类型切换时会清空Sku数据或者设置sku 为单规格
const changeType = (val: any) => {
	if(goodsInfoData.status == 'edit'){
		return ElMessage({
			type: 'warning',
			message: '商品编辑时商品类型不可修改',
		})
	}
	if(val != goodsInfoData.spuType){
		goodsInfoData.spuType = val;
		goodsInfoData.brandId = null; // 品牌重置
		goodsInfoData.salesChannel = []; // 渠道重置
		goodsInfoData.tplId = null;  // 模板重置
		goodsInfoData.quotaAuthority =  0, // 商品限购类型 0 不限购 1 统一限购 2 单一限购(根据sku限购)
		goodsInfoData.onceRestrictedPurchaseNumber= 0, // 商品单次限购数量
		goodsInfoData.longRestrictedPurchaseNumber=  0, // 商品永久限购数量
		goodsInfoData.salesOnlineChannel = [], // 线上商品销售渠道
		goodsInfoData.memberIntegral = 0, // 会员积分类型 0 不积分 1 全额积分 2 自定义积分(根据sku限购)
		goodsInfoData.paidmemberIntegral = 0, // 付费会员积分类型 0 不积分 1 全额积分 2 自定义积分(根据sku限购)
		goodsInfoData.memberDiscount = 0, // 会员折扣类型 0 不折扣 1 系统默认折扣 2 自定义折扣(根据sku限购)
		goodsInfoData.paidmemberDiscount =  0, // 付费会员折扣类型 0 不折扣 1 系统默认折扣 2 自定义折扣(根据sku限购)
		goodsInfoData.commissionSet = 0, // 佣金设置类型 0 不参与 1 系统默认 2 单独设置佣金(根据sku限购)
		goodsInfoData.specList = [{ name: "默认", childItem: [ {name: "默认1" } ]}];
		goodsInfoData.multipleData.skuSpecList = goodsInfoData.specList[0].childItem;
		goodsInfoData.skuList = [goodsInfoData.multipleData];
		// 类型变更需要更改其他商品类型组件sku属性选项
		emit('changeSpuType')
	}
}

// 添加销售门店
const addSaleStore = (value:any) => {
	if(value == 'store'){
		selectStoreRef.value.openDialog(value,goodsInfoData.storeSales);
	}else if(value == 'service'){
		selectStoreRef.value.openDialog(value,goodsInfoData.storeService);
	}
}

// 选中的门店
const selectItem = (type:String,storeItem:any) =>{
	if(type == 'store'){
		goodsInfoData.storeSales = storeItem.map((obj: any) => { return { itemId: obj.id, itemName: obj.name } });
	}else if(type == 'service'){
		goodsInfoData.storeService = storeItem.map((obj: any) => { return { itemId: obj.id, itemName: obj.name } });
	}
}

// 服务门店同销售门店
const copySaleStore = () =>{
	goodsInfoData.storeService = goodsInfoData.storeSales;
}


// 图片选中
const addImg = (type: string, isArr: Number) => {
	state.addFileType = type;
	addInformationRef.value.openDialog(isArr)
}

// 图片选中回调
const selectFun = (fileList: any) => {
	if (state.addFileType == 'imgUrl') {
		goodsInfoData.imgUrl = fileList[0]
	} else if (state.addFileType == 'imgOblongUrl') {
		goodsInfoData.imgOblongUrl = fileList[0]
	} else if (state.addFileType == 'imgOnline') {
		goodsInfoData.imgOnline = fileList
	}
}

// 品牌列表获取
const getBrandList = async () => {
	const { results } = await brandList({ mode: null });
	state.brandList = results.records
}

// 门店商品分类获取
const getStoreCategoryList = async () => {
	const { results } = await productCategoryList({ platformType: 0 });
	state.storeCategoryList = results
}

// 商城商品分类获取
const getShopCategoryList = async () => {
	const { results } = await productCategoryList({ platformType: 1 });
	state.shopCategoryList = results
}

// 初始化表格数据
const getTemplateList = async () => {
	const params = {
		pageNum: 1,
		pageSize: 100,
	}
	const { results } = await freightTemplateList(params)
	state.freightTemplateList = results.records;
};

// 添加商品分类
const addCategores = (value: String) => {
	console.log(value)
}

// 页面加载时
onMounted(() => {
	// 获取商品品牌列表
	getBrandList();
	// 门店商品分类获取
	getStoreCategoryList();
	// 商城商品分类获取
	getShopCategoryList();
	// 获取运费模板
	getTemplateList();
});

const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			console.log('submit!')
		} else {
			console.log('error submit!', fields)
		}
	})
}

const nextStep = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			emit('stepChange', 'second')
		} else {
			console.log('error submit!', fields)
		}
	})
}

</script>

<style lang="scss" scoped>
@import '../../../../theme/other.scss';
.base-info-content {
	display: flex;
	flex-direction: column;
	flex: 1;
	height: inherit;
	.el-form{
		flex:1;
		overflow-y: auto;
		position: relative;
	}
	.form-ele-size {
		width: 260px;
	}

	.line-title {
		font-size: 18px;
		padding: 8px 12px;
		background-color: #eceef0;
		border-radius: 6px;
		margin-bottom: 15px;
	}

	.selector-img {
		width: 64px;
		height: 64px;
		border: 1px solid #ededed;
		border-radius: 5px;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		&:hover {
			background-color: #f5f5f5;
			border: 1px solid #e4e3e3;
		}
	}
	.typeBox{
		height: 65px;
		margin-right: 15px;
		border: 1px solid var(--el-border-color-light, #ebeef5);
		line-height: 24px;
		box-sizing: border-box;
		cursor: pointer;
		span:first-child{
			font-weight: 600;
		}
		span:last-child{
			font-weight: 500;
			color: var(--el-color-info-light-3);
		}
	}
	.typeBoxSelected {
		border: 1px solid var(--el-color-primary);
		position: relative;
		.virtual_san{
			position: absolute;
			bottom: 0;
			right: 0;
			width: 0;
			height: 0;
			border-bottom: 26px solid var(--el-color-primary);
			border-left: 26px solid transparent;
		}
		.virtual_dui{
			position: absolute;
			bottom: -2px;
			right: 2px;
			color: #fff;
			font-family: system-ui;
		}
	}
}


</style>
